<template>
  <div>
    <h1>app</h1>
    <h2>渲染string/number</h2>
    <p>当前计数为：{{ state.count }}----reactive--->ref:{{ count }}</p>
    <button @click="increment">+1</button>
    <hr />
    <h2>条件渲染</h2>
    <button @click="toggle">toggle</button>
    <p :class="{ active: isActive }">active</p>

    <hr />
    <h2>渲染object</h2>
    <p>{{ obj }}</p>
    <p v-for="(value, key) in obj" :key="key">key为：{{ key }}----值为：{{ value }}</p>

    <hr />
    <h2>渲染array</h2>
    <p>{{ arr }}</p>
    <p v-for="(item, index) in arr" :key="index">{{ item }}</p>
  </div>
</template>

<script setup>
import { reactive, toRef, toRefs } from 'vue'

const state = reactive({
  count: 100,
  isActive: false,
  arr: [1, 2, 3, 4, 5],
  obj: { name: 'zs', age: 18, height: 1.88 }
})

// 把reactive对象中的属性转换为ref对象
// const count = toRef(state, 'count')
// const isActive = toRef(state, 'isActive')

// 把reactive对象中的属性全部转换为ref对象
const { count, isActive, arr, obj } = toRefs(state)

const increment = () => {
  // state.count++
  count.value++
}

const toggle = () => {
  // isActive.value = !isActive.value
  state.isActive = !state.isActive
}

// 修改obj数据
setTimeout(() => {
  // state.obj.name = 'ls'
  // state.obj.age = 20
  // state.obj.height = 1.88
  obj.value.name = 'ls'
  obj.value.age = 20
  obj.value.height = 1.88
}, 2000)

// 添加数组
setTimeout(() => {
  // state.arr.push(6)
  state.arr = [...state.arr, 6]
}, 3000)

// 修改数组
setTimeout(() => {
  arr.value.splice(1, 1, 100)
})
</script>

<style lang="scss" scoped>
.active {
  background-color: red;
  color: pink;
}
</style>
